<template>
    <div class="filterBlock">
        <div class="brandBlock flex">
            <div class="title">品牌：</div>
            <div class="block">
                <div class="letterList">
                    <!-- <div :class='letteCheck == "" ? "item active": "item"' @click='letterChange("")'>不限</div> -->
                    <div :class='letteCheck == item.letter ? "item active": "item"' v-for="(item,index) in datas" :key="index" @click="letterChange(item)">{{item.letter}}</div>
                </div>
                <div class="brandList" v-if="brandsList.length != 0">
                    <div :class='brandCheck == item.brand ? "item active": "item"' v-for="(item,index) in brandsList" :key="index" @click="brandChange(item)">
                        <div class="logo">
                            <img :src="item.logo" alt="">
                        </div>
                        <div class="brandName">{{item.brand}}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="seriesBlock flex">
            <div class="title">系列：</div>
            <div class="seriesList">
                <div :class='seriesCheck == "" ? "item active": "item"' @click="seriesChange('')">不限</div>
                <div :class='seriesCheck == item.name ? "item active": "item"' v-for="(item,index) in seriesList" :key="index" @click="seriesChange(item)">{{item.name}}</div>
            </div>
        </div>
    </div>
    <div class="filterBox" v-if=' brandCheck != "" || seriesCheck != "" '>
        当前筛选：
        <div class="tagList">
            <div class="item" v-if="brandCheck">
                品牌：
                <span>{{brandCheck}}</span>
                <el-icon size="16" color="#3A85F5" @click='brandChange("")'>
                    <CircleCloseFilled />
                </el-icon>
            </div>
            <div class="item" v-if="seriesCheck" @click='seriesChange("")'>
                系列：
                <span>{{seriesCheck}}</span>
                <el-icon size="16" color="#3A85F5">
                    <CircleCloseFilled />
                </el-icon>
            </div>
        </div>
        <el-button type="primary" class="btn_gradient" @click='brandChange(""),seriesChange("")'>重置条件</el-button>
    </div>
</template>
<script setup>
import { ref, computed, onMounted, getCurrentInstance, } from "vue";
import { CircleCloseFilled } from "@element-plus/icons-vue";

const { proxy } = getCurrentInstance();
const emit = defineEmits(['change'])
const loading = ref(false);
const brandsList = ref([]);
const seriesList = ref([]);
const letteCheck = ref("");
const brandCheck = ref("");
const seriesCheck = ref("")

onMounted(() => {
    getSortList();
});

const datas = ref([]);
const getSortList = () => {
    proxy.$get({
        url: "/product/listing/category",
    }).then((res) => {
        datas.value = res
        // res.forEach(item => {
        //     item.brand.forEach((brand) => {
        //         brandsList.value.push(brand)
        //     })
        // });
        letteCheck.value = 'A'
        brandsList.value = res.find(x=>{
            return x.letter === letteCheck.value
        }).brand
        loading.value = false;
    }, () => {
        loading.value = false;
    });
}

const letterChange = (item) => {
    if (item == "") {
        letteCheck.value = "";
        brandsList.value = [];
        brandCheck.value = "";
        seriesCheck.value = "";
        seriesList.value = []
        datas.value.forEach(item => {
            item.brand.forEach((brand) => {
                brandsList.value.push(brand)
            })
        });
        params.value.brand = "";
        params.value.series = ""
        emit("change", params.value)
    } else {
        letteCheck.value = item.letter;
        brandsList.value = item.brand;

    }
};
const params = ref({
    current: 1,
    size: 15,
    brand: "",
    keyword: "",
    model: "",
    series: ""
})
const brandChange = (item) => {
    if (item == "") {
        brandCheck.value = "";
        seriesList.value = [];
        seriesCheck.value = "";
        params.value.brand = "";
        params.value.series = ""
        emit("change", params.value)
    } else {
        brandCheck.value = item.brand;
        seriesList.value = item.series;
        params.value.brand = item.brand;
        emit("change", params.value)
    }
};
const seriesChange = (item) => {
    if (item == "") {
        seriesCheck.value = "";
        params.value.series = "";
        emit("change", params.value)
    } else {
        params.value.series = item.name
        seriesCheck.value = item.name;
        emit("change", params.value)
    }
}
</script>
<style lang="less" scoped>
.filterBox {
    width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    .tagList {
        margin-right: 10px;
        display: flex;
        .item {
            display: flex;
            align-items: center;
            background: #ffffff;
            border-radius: 3px;
            padding: 5px 10px;
            color: #5e6163;
            border: 1px solid #e0e0e0;
            span {
                margin-right: 5px;
            }
            i {
                cursor: pointer;
            }
            margin-right: 10px;
        }
    }
    button {
        background: linear-gradient(65deg, #6cbbfb 0%, #3a85f5 100%);
    }
}
.filterBlock {
    width: 1140px;
    // height: 272px;
    background: #ffffff;
    border-radius: 5px;
    padding: 30px;
    margin: 15px auto;
    .title {
        font-size: 14px;
        font-weight: 400;
        color: #5e6163;
        line-height: 20px;
    }
    .seriesBlock {
        margin-top: 30px;
        .seriesList {
            display: flex;
            flex-wrap: wrap;
            .item {
                font-size: 14px;
                font-weight: 400;
                color: #202020;
                line-height: 20px;
                margin-right: 20px;
                margin-bottom: 30px;
                cursor: pointer;
                padding: 3px 12px;
                &.active {
                    color: #3a85f5;
                    background: #e2f1fc;
                    border-radius: 13px;
                }
            }
        }
    }
    .brandBlock {
        .block {
            width: 1082px;
            .letterList {
                margin-top: -3px;
                display: flex;
                align-items: center;
                flex-wrap: wrap;
                .item {
                    cursor: pointer;
                    width: auto;
                    font-size: 14px;
                    font-weight: 400;
                    color: #202020;
                    margin-right: 20px;
                    padding: 3px 12px;
                    text-align: center;
                    line-height: 20px;
                    &.active {
                        color: #3a85f5;
                        background: #e2f1fc;
                        border-radius: 13px;
                    }
                }
            }
            .brandList {
                margin-top: 20px;
                width: 1022px;

                background: #fafafa;
                border-radius: 5px;
                display: flex;
                flex-wrap: wrap;
                justify-content: flex-start;
                padding: 15px 30px 30px 30px;
                .item {
                    margin-right: 22px;
                    padding-top: 15px;
                    cursor: pointer;
                    width: 60px;
                    &.active {
                        .brandName {
                            color: #3a85f5;
                        }
                    }
                    .logo {
                        width: 36px;
                        height: 36px;
                        margin: 0 auto 10px;
                        border: 1px solid #e2f1fc;
                    }
                    .brandName {
                        text-align: center;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #202020;
                        line-height: 20px;
                    }
                }
            }
        }
    }
}
</style>